@font-size-base: 12px;
#rem {
  .to-px(@px: 20px; @base: @font-size-base) {
    @rem: ((@px / @base) * 1rem);
  }
  .custom-property(@property; @px: 20px; @base: @font-size-base) {
    .to-px(@px, @base);
      @{property}: @rem;
  }
  .custom-property-important(@property; @px: 20px; @base: @font-size-base) {
    .to-px(@px, @base);
      @{property}: @rem !important;
  }

  /*.padding-direction(@direction: top; @px: 20px; @base: @font-size-base) {
    .to-px(@px; @base);
    padding-@{direction}: @rem;
  }*/
  .padding-margin-short(@property; @top:20px; @right: 20px;@base: @font-size-base){
      @{property}: (@top / @base) * 1rem (@right / @base) * 1rem;
  }
  .padding-margin(@property; @top:0px; @right: 0px;@bottom: 0px; @left: 0px; @base: @font-size-base) {
      @{property}: (@top / @base) * 1rem (@right / @base) * 1rem (@bottom / @base) * 1rem  (@left / @base) * 1rem ;
  }
  .padding-margin-short-important(@property; @top:20px; @right: 20px;@base: @font-size-base){
      @{property}: (@top / @base) * 1rem (@right / @base) * 1rem !important;
  }
}

